import React, { useEffect, useRef, useState } from "react";
import "./Hero.css";
import axios from "axios";
import Search from "./Search";
import HeroList from "./HeroList";
import { useNavigate } from "react-router-dom";
import KeepAlive from 'react-activation'

export default function Hero() {
  let navigate = useNavigate();
  return (
    <div className="hero-container">
      <button
        className="btn btn-danger btn-sm"
        onClick={() => {
          navigate(1);
        }}
      >
        前进
      </button>
      <h1>英雄列表</h1>
      <hr />
      <Search />
      <hr />
      <KeepAlive>
        <HeroList />
      </KeepAlive>
    </div>
  );
}
